<template >
  <div class="detailsAll">
    <h3>基本信息</h3>
    <div class="detailsTop">
      <span>订单ID：<span>0001</span></span>
      <span>订单号：<span>111111111</span></span>
      <span>订单状态：<span>待发货</span></span>
      <br>
      <span>用户昵称：<span>0001</span></span>
      <span>联系电话：<span>111111111</span></span>
      <span>下单时间：<span>待发货</span></span>
      <br>
      <span>支付方式：<span>0001</span></span>
      <span>应付金额：<span>111111111</span></span>
    </div>
    <h3>收货信息</h3>
    <div class="detailsMid">
      <span>收货人：<span>0001</span></span>
      <span>收货地址：<span>上海</span></span>
      <span>运费：<span>111</span></span>
      <br>
      <span>订单优惠：<span>0001</span></span>
      <span>配送方式：<span>顺丰</span></span>
      <span>应付金额：<span>111</span></span>
    </div>
    <div>
      <h3>商品信息</h3>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%" class="detailsTable">
        <el-table-column
          prop="date"
          label="商品编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="商品名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="商品规格">
        </el-table-column>
        <el-table-column
          prop="address"
          label="商品数理">
        </el-table-column>
        <el-table-column
          prop="address"
          label="单品价格">
        </el-table-column>
        <el-table-column
          prop="address"
          label="单品总计">
        </el-table-column>

      </el-table>
    </div>
  </div>


</template>

<script>
    export default {
        name: "orderDetails",
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市'
          },  {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普'
          }]
        }
      }

    }
</script>

<style scoped>
  .detailsAll h3{
    padding: 30px;
  }
  .detailsAll{
    width: 100%;
    background: white;
    margin-top: 10px;
  }
  .detailsTop{
    width: 100%;

  }
  .detailsTop>span {
    display: inline-block;
    width: 200px;
    /*border: 1px solid red;*/
    margin-left: 120px;
    font-size: 12px;
  }
  .detailsMid>span{
    display: inline-block;
    width: 200px;
    /*border: 1px solid red;*/
    margin-left: 120px;
    font-size: 14px;
  }
  .detailsTable{
    margin-left: 30px;
  }

</style>
